import 'core-js/fn/array/from'

import Scrollload from '../../Scrollload'
import './index.css'
import '../../loading-demos/baidu-mobile/loading.css'

const data = [
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20141222121421_798.jpg',
        name: '画圆圈',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150611143728_164.png',
        name: '英雄难过棍子关',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150403115426_276.jpg',
        name: '胸口碎大石',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150611160815_643.jpg',
        name: '酒后别开车',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    },
    {
        image: 'http://imagesrcdola.b0.upaiyun.com/0/20150715225730_758.jpg',
        name: '是男人就去优衣库',
        label: '创意游戏',
        desc: '动手画个圆，你行吗？'
    }
]

function getData() {
    return Array.from(new Array(5)).map(() => {
        let item = data[Math.floor(Math.random() * 5)]
        return `
        <li>
            <div class="info">
                <img class="image" src="${item.image}">
                <div class="desc">
                    <p>${item.name}</p>
                    <span>${item.label}</span>
                    <p>${item.desc}</p>
                </div>
            </div>
            <a class="btn" href="http://m.dolapocket.com/" target="_blank">开始</a>
        </li>
`
    }).join('')
}
const scrollloads = []
Array.from(document.querySelectorAll('.container')).forEach((container, index) => {
    scrollloads.push(new Scrollload(container, function(sl) {
        setTimeout(() => {
            sl.count = sl.count || 0
            if (sl.count++ < 5) {
                sl.container.querySelector('.list').insertAdjacentHTML('beforeend', getData())
                sl.unLock()
            } else {
                sl.noData()
            }
        }, 500)
    },{
        loadingHtml: `
            <div class="s-loading-frame">
                <div class="load-img-wrapper">
                    <img class="load-ing-img" src="">
                </div>
                <span class="load-text">正在加载</span></div>
            </div>
`,
        noDataHtml: `
            <div class="s-loading-frame bottom-no-more">
                <span>真的拉不出新东西了~</span>
            </div>
`,
        isInitLock: index === 0 ? false : true,
    }))
})

Array.from(document.querySelectorAll('.header li')).forEach((li, i) => {
    li.addEventListener('click', function () {
        scrollloads.forEach((scrollload, index) => {
            index === i ? scrollload.unLock() : scrollload.lock()
        })
        Array.from(document.querySelectorAll('.container')).forEach((container, index) => container.style.display = index === i ? 'block' : 'none')
    })
})